
<script>
	import View from 'ol/view'
	import services from '../../mixin/services.js'
	export default {
		name: 'vView',
		mixins:[services],
		props:{
			center: {
				type: Array,
				default: () => [0, 0],
				validator: value => value.length === 2,
			},
			constrainRotation: {
				type: [Boolean, Number],
				default: true,
			},
			enableRotation: {
				type: Boolean,
				default: true,
			},
			extent: {
				type: Array,
				validator: value => value.length === 4,
			},
			maxResolution: Number,
			minResolution: Number,
			/**
			* @default 28
			*/
			maxZoom: Number,
			/**
			* @default 0
			*/
			minZoom: Number,
			/**
			* @type {string}
			* @default EPSG:3857
			*/
			projection: String,
			resolution: Number,
			resolutions: Array,
			/**
			* The initial rotation for the view in **radians** (positive rotation clockwise).
			* @type {number}
			* @vueSync
			*/
			rotation: {
				type: Number,
				default: 0,
			},
			/**
			* Zoom level used to calculate the resolution for the view as `int` value. Only used if `resolution` is not defined.
			* @type {number}
			* @default 0
			* @vueSync
			*/
			zoom: Number,
			/**
			* @default 2
			*/
			zoomFactor: Number
		},
		methods: { //方法,,
			init() {


			},
			mount() {
				this._object = (this.createObeject().bind(this))();
				this.$map && this.$map.setView(this)
			},
			/**
			 * 创建对应的实例对象
			 */
			createObeject() {
				return function () {
					return new View({
						center: this.center,
						constrainRotation: this.constrainRotation,
						enableRotation: this.enableRotation,
						extent: this.extent,
						maxResolution: this.maxResolution,
						minResolution: this.minResolution,
						maxZoom: this.maxZoom,
						minZoom: this.minZoom,
						projection: this.projection,
						resolution: this.resolution,
						resolutions: this.resolutions,
						rotation: this.rotation,
						zoom: this.zoom,
						zoomFactor: this.zoomFactor,
					  })
				}
			},


		},
		created(){
			Object.defineProperties(this, /** @lends module:map/view# */{
				/**
				* @type {ol.View|undefined}
				*/
				$_view: {
					enumerable: true,
					get: () => this._object,
				},
				$map: {
					enumerable: true,
					get: () => this.$services && this.$services.map,
				},
			})
			
		},
		mounted(){
			this.mount();
		}
	}
</script>
